$(function(){
    load()
    $('#title').on('keydown', function (event) {
        if (event.keyCode == 13) {
            // 先读取本地存储原来的数据
            var local = getDate();
            if ($(this).val() == '') {
                return
            } else {
                // 把local数组进行更新数据 把最新的数据追加给local数组
                local.push({
                    title: $(this).val(),
                    done: false
                })
                // 保存到本地存储
                saveDate(local);
                // 重新渲染页面
                load();
                
            }
            $(this).val('')
        }
    })


    //删除
    $('ol ,ul').on('click','a',function(){
        var data = getDate()
        //attr自定义函数
        var index = $(this).attr('index')
        data.splice('index',1)
        saveDate(data)
        load()
    })
    //已完成未完成函数
    $('ol ,ul').on('click', 'input', function () {
        var data = getDate()
        //attr自定义函数
        var index = $(this).siblings('a').attr('index')
        data[index].done = $(this).prop('checked')
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    })
    // 读取本地存储的数据 
    function getDate() {
        var data = localStorage.getItem('todolist')
        if (data !== null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }

    // 保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    // 渲染加载数据
    function load(){
        var data = getDate()
        $('ol, ul').empty();
        var todoCount = 0
        var dodoCount = 0
        $.each(data,function(i,n){
            if (n.done) {
            $("ul").prepend($(`<li>
            <input type="checkbox" name="" id="" checked='checked'>
            <p>${n.title}</p>
            <a href='javascript:;' index=${i}></a>
            </li>`));
            dodoCount++
            }else{
            $('ol').prepend($(`<li>
            <input type="checkbox" >
            <p>${n.title}</p>
            <a href='javascript:;' index=${i}></a>
            </li>`))
            todoCount++
            }
        })

        $('#todocount').text(todoCount)
        $('#donecount').text(dodoCount)
    }
})